<template>
  <div>
    <h1>{{ msg }}</h1>
    <a href="" :class="style.link">超链接</a>
    <h2>less</h2>
    <h3>sass</h3>
    <button @click="handleClick">{{state.count}}</button>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import style from './HelloWorld.module.css'
defineProps({
  msg: {
    type: String,
    default: "",
  },
})
interface State {
  count: number;
}
// 函数泛型使用
let state = reactive<State>({ count: 0 });
const handleClick = () => {
  console.log(state.count);
  state.count++;
}
</script>
<style lang="less" scoped>
@color: red;
h2 {
  color: @color;
}
</style>
<style lang="scss" scoped>
$color: green;
h3 {
  color: $color;
}
</style>
